<template>
	<view class="page">
		<view class="padding-box">
			<view v-if="store.images" style="margin-bottom: 20rpx;">
				<u-swiper @click="showAlbum=true" :list="store.images" :effect3d="true" :interval="6000" v-if="windowWidth>0" :width="windowWidth" :height="300" img-mode="aspectFill" bg-color="#fff"></u-swiper>
			</view>
			<view class="store-title">
				{{store.shop_name}}
			</view>
			<view class="categories">
				服务范围：{{storeServices}}
			</view>
			<view class="categories" v-if="store.hour_start && store.hour_end">
				营业时间：{{store.hour_start}}-{{store.hour_end}}
			</view>
			<view class="u-flex">
				<view style="flex:1;overflow: hidden;">
					<view class="categories address">{{store.address}}</view>
					<!-- <view class="sm-font">距您 1.7km</view> -->
				</view>
				<view class="icon-btn" @click="openMap">
					<u-icon name="map"></u-icon>
					<view>导航</view>
					</view>
				<view class="icon-btn" @click="callPhone">
					<u-icon name="phone"></u-icon>
					<view>电话</view>
				</view>
			</view>
		</view>

		<view class="padding-box">
			<view class="category-box" v-if="store.store_categories">
				<view class="category" :class="{active:current_category===category.id}" @click="current_category=category.id" v-for="category in store.store_categories">{{category.name}}</view>
			</view>
			<view class="product-list">
				<view class="product" v-for="item in currentItems">
					<view class="cover">
						<u-lazy-load @click="openPage(item.uniapp_path,{page:'store'})"
							loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
							:height="120" img-mode="aspectFill" :image="item.cover">
						</u-lazy-load>
					</view>
					<view class="product-info">
						<view class="product-title" @click="openPage(item.uniapp_path,{page:'store'})">{{item.name}}</view>
						<view class="product-desc" @click="openPage(item.uniapp_path,{page:'store'})">{{item.remark}}</view>
						<view class="price-info u-flex">
							<view style="flex:1;overflow: hidden;">
								<view class="sale-price">¥ {{item.unit_price}} <view class="origin-price" v-if="item.original_price>0">门市价 ¥ {{item.original_price}}</view></view>
								<view class="price-tag">会员专享</view>
							</view>
							<view class="btn-box">
								<view class="btn-buy" @click="buyNow(item.id)">抢购</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if="currentItems.length===0" text="暂无相关商品" mode="search"></u-empty>
			</view>
		</view>
		
		<view class="u-content" v-if="store.richtext">
			<u-parse :html="store.richtext"></u-parse>
		</view>

		<view class="padding-box" v-if="store.store_comments && store.store_comments.length>0">
			<view class="comment-title">
				门店评价
			</view>
			<view>
				<view class="comment">
					<view class="user-car">
						<view class="avatar">
							<u-lazy-load @click="openPage('/pages/buy/item',{id:store.id})"
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="60" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="user-info">
							<view class="name-car">
								<view class="name">微信用户</view>
								<view class="car">大众 - 捷达</view>
							</view>
							<view class="rating"><u-rate :current="5" :size="22" :disabled="true"></u-rate><view class="score">5.00</view></view>
						</view>
						<view class="time">2024.05.21</view>
					</view>
					<view class="comment-text">
						评论文字，服务很好，技术人员很专业
					</view>
					<view class="comment-images">
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
					</view>
				</view>


				<view class="comment">
					<view class="user-car">
						<view class="avatar">
							<u-lazy-load @click="openPage('/pages/buy/item',{id:store.id})"
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="60" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="user-info">
							<view class="name-car">
								<view class="name">微信用户</view>
								<view class="car">大众 - 捷达</view>
							</view>
							<view class="rating"><u-rate :current="5" :size="22" :disabled="true"></u-rate><view class="score">5.00</view></view>
						</view>
						<view class="time">2024.05.21</view>
					</view>
					<view class="comment-text">
						评论文字，服务很好，技术人员很专业
					</view>
					<view class="comment-images">
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
					</view>
				</view>

				<view class="comment">
					<view class="user-car">
						<view class="avatar">
							<u-lazy-load @click="openPage('/pages/buy/item',{id:store.id})"
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="60" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="user-info">
							<view class="name-car">
								<view class="name">微信用户</view>
								<view class="car">大众 - 捷达</view>
							</view>
							<view class="rating"><u-rate :current="5" :size="22" :disabled="true"></u-rate><view class="score">5.00</view></view>
						</view>
						<view class="time">2024.05.21</view>
					</view>
					<view class="comment-text">
						评论文字，服务很好，技术人员很专业
					</view>
					<view class="comment-images">
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
						<view class="image">
							<u-lazy-load
								loading-img="/static/images/loadingImg.png" threshold="-50" border-radius="10"
								:height="120" img-mode="aspectFill" :image="store.cover" :index="index">
							</u-lazy-load>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <uni-fab :pattern="pattern" :content="buttonContent" horizontal="right" vertical="top" direction="horizontal" @trigger="trigger"></uni-fab> -->
		<wx-share :title='pageTitle' :desc="shareDesc" @openLocation="openMap" :imgUrl="shareCover" :link="currentPage" ref="wxs"></wx-share>
		<u-modal v-model="showQrCode" title="长按二维码关注公众号">
			<view class="slot-content u-flex" style="align-items: center;justify-content: center;">
				<img :src="shop.wx_qrcode">
			</view>
		</u-modal>
	</view>
</template>

<script>
	var jweixin = require('jweixin-module')

	export default {
		name:'store-detail',
		data() {
			return {
				pattern: {
					color: "#3c3e49",
					buttonColor: "red"
				},
				buttonContent: [
					{text:'首页',active:false,iconPath:'/static/images/home-1.png',selectedIconPath:'/static/images/home-1.png'},
					// {text:'购物车',active:false,iconPath:'/static/images/shop-cart-0.png',selectedIconPath:'/static/images/shop-cart-1.png'},
					{text:'关注',active:false,iconPath:'/static/images/qrcode-1.png',selectedIconPath:'/static/images/qrcode-1.png'},
					{text:'会员',active:false,iconPath:'/static/images/user-1.png',selectedIconPath:'/static/images/user-1.png'}

				],
				showAlbum: false,
				windowWidth:0,
				storeId: '',
				store:{},
				shop:{},
				user:{},
				showQrCode: false,
				currentPage: location.href,
				current_category:'',
				wxConfig:{}
			}
		},
		computed: {
			storeServices(){
				if(this.store.store_categories){
					return this.store.store_categories.map(item => item.name).join(' | ');
				}
				return ''
			},
			currentItems(){
				if(this.store.store_products && this.current_category){
					return this.store.store_products.filter(product => product.category_id === this.current_category);
				}
				return []
			},
			pageTitle() {
				if (this.store.title) {
					return this.article.title
				}
				if (this.shop.name) {
					return this.shop.name + ' - 马孚博士爱车会'
				}
				return '马孚博士爱车会'
			},
			shareDesc() {
				if (this.store.desc) {
					return this.store.desc
				}
				if (this.shop.order_footer_text) {
					return this.shop.order_footer_text
				}
				return this.shop.store_introduction
			},
			shareCover() {
				if(this.store.cover) {
					return this.store.cover
				}
				if(this.shop.cover){
					return this.shop.cover
				}
				return this.user.avatar
			}
		},
		onLoad(options) {
			this.getShop()
			this.getUserInfo()
			const info = uni.getSystemInfoSync()
			// this.windowWidth = info.windowWidth
			this.windowWidth = info.windowWidth
			console.log(this.windowWidth)
			this.storeId = options.id;
			this.getStore();
			this.getWxConfig()
		},
		onPullDownRefresh(){
			this.getStore()
		},
		methods: {
			getWxConfig() {
				let that = this;

				this.$u.post('/shopping/wx-js-sdk-config', {
					current_page: location.href.split('#')[0]
				}).then(res => {
					if(!res.current_uid){
						return;
					}
					console.log(res)
					this.wxConfig = res
					jweixin.config(this.wxConfig)
					//jweixin.config(res);
					// jweixin.ready(function() {
					// 	// TODO
					// 	console.log('wx-is ready')
					// });
					// jweixin.error(function(res) {
					// 	console.log(res)
					// 	// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
					// });
				}).catch(e => {
				})
			},
			trigger(e) {
				console.log(e)
				if(e.index===0){
					this.switchTab('/pages/index/index')
				}else if(e.index===1){
					this.showQrCode = true;
					// this.switchTab('/pages/buy/cart')
				}else if(e.index===2){
					this.switchTab('/pages/ucp/index')
				}else if(e.index===3){

				}
			},
			getUserInfo() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
					if (this.user.referral_id == 0) {
						this.user.referral_id = '';
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getStore(){
				this.$u.post('/store/detail', {id:this.storeId}).then(res => {
					this.store = res;
					if(this.store.store_categories && this.store.store_categories.length>0){
						this.current_category = this.store.store_categories[0].id
					}
				}).catch(e => {

				})
			},
			callPhone() {
				if(!this.store.service_tel){
					return;
				}
				uni.makePhoneCall({
				  phoneNumber: this.store.service_tel // 电话号码
				});
			},
			openMap() {
				let lat = parseFloat(this.store.lat);
				let lng = parseFloat(this.store.lng);
				if(!lat || !lng){
					return;
				}
				jweixin.ready(()=>{
					jweixin.openLocation({
						// 调起地图应用进行导航
						  latitude: lat, // 纬度，浮点数，范围为90 ~ -90
						  longitude: lng, // 经度，浮点数，范围为180 ~ -180。
						  name: this.store.shop_name, // 位置名
						  address: this.store.address, // 地址详情说明
						  scale: 14, // 地图缩放级别,整型值,范围从1~28。默认为最大
						  infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
					})
				})
			},
			buyNow(itemId) {
				this.$u.post('/shopping/buy-now', {
					item_id: itemId,
					quantity: 1,
					store_id: this.storeId
				}).then(res => {
					console.log(res)
					if(res.id){
						this.openPage('/pages/ucp/order-detail',{id:res.id})
					}
				}).catch(e => {

				})
			},
			switchTab(jumpURL) {
				uni.switchTab({
					url: jumpURL
				})
			},
			old_openLocation() {
				if (!this.shop.lat || !this.shop.lng) {
					console.log('open location false;')
					return false;
				}
				let that = this;
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = parseFloat(that.shop.lat);
						const longitude = parseFloat(that.shop.lng);

						const systemInfo = uni.getSystemInfoSync();
						if (systemInfo.platform === 'ios' || systemInfo.platform === 'android') {
						    // 当前是小程序
						    console.log('当前是小程序');
						} else if (systemInfo.platform === 'windows' || systemInfo.platform === 'macos') {
						    // 在H5环境下，可能获取到windows或macos，可以通过UA来进一步判断
						    console.log('当前是H5');
						}

						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: that.shop.name,
							address: that.shop.address,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			},
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber //仅为示例
				});
			}
		}
	}
</script>

<style scoped>
	.padding-box{
		margin: 15rpx;
		background-color:#fff;
		padding: 15rpx 15rpx;
		border-radius: 8rpx;
		box-sizing: border-box;
	}
.store-title{
	font-size: 34rpx;
	font-weight: bold;
	line-height: 1.8;
}
.categories{
	font-size: 24rpx;
	font-weight: bold;
	line-height: 1.8;
}
.address{
	white-space: nowrap; /* 保持文字在一行显示 */
	overflow: hidden; /* 隐藏超出容器的部分 */
	text-overflow: ellipsis; /* 文字过长时显示省略号 */
	text-align: left; /* 文字右对齐 */
	direction: rtl; /* 设置文本方向为从右到左，这对于右对齐的文本在显示省略号时很有用 */
}
.icon-btn{
	width: 80rpx;
	text-align: center;
	display:flex;
	flex-direction: column;
	align-items: center;
	font-size: 22rpx;
	color: rgba(0,0,0,.63);
}
.icon-btn .u-icon{
	font-size: 32rpx;
	margin-bottom: 6rpx;
}
.sm-font{
	font-size: 22rpx;;
}
.category-box{
	padding-bottom: 20rpx;
	white-space: nowrap;
	overflow-x: auto;
	width: 100%;
	scroll-snap-type: x mandatory;  /* 启用滚动捕捉 */
}
.category{
	display: inline-block;
	font-size: 30rpx;
	margin-right: 36rpx;
	scroll-snap-align: start;       /* 对齐到左侧边缘 */
	transition: background-color 0.3s; /* 平滑的背景色变化 */
}
.category:last-child{
	margin-right: 0;
}
.category.active{
	font-weight: bold;
	color: red;
	font-size: 34rpx;
	border-bottom: 8rpx red solid;
	border-radius: 8rpx;
}
.product{
	display:flex;
	align-items: flex-start;
	margin-bottom: 20rpx;
}
.product:active{
	background-color: #fafafa;
	transition: .15s;
}
.product .cover{
	width: 120rpx;
	height: 120rpx;
}
.product .product-info{
	padding-left:20rpx;
	box-sizing: border-box;
	flex: 1;
	overflow: hidden;
}
.product .product-info .product-title{
	font-size: 28rpx;
	font-weight: bold;
	line-height: 1.5;
}
.product .product-info .product-desc{
	font-size: 24rpx;
	line-height: 1.5;
	color: darkgoldenrod;
}

.product .product-info .sale-price{
	color: red;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 1.8;
}
.product .product-info .origin-price{
	font-size: 26rpx;
	color: rgba(0,0,0,.63);
	display: inline-block;
	padding-left: 20rpx;
	font-weight: normal;
}
.product .price-info{
	align-items: flex-start;
}
.price-tag{
	display: inline-block;
	font-size: 22rpx;
	font-weight: 400;
	background-color: rgba(0,0,0,.93);
	color: goldenrod;
	padding: 0 10rpx;
	line-height: 1.5;
	border-radius: 6rpx;
	overflow: hidden;
}
.btn-buy{
	width: 110rpx;
	text-align: center;
	background-color: red;
	line-height: 2.4;
	color: #FFF;
	font-size: 30rpx;
	border-radius: 10rpx;
}
.btn-buy:active{
	background-color: orangered;
	transition: .2s;
}
.comment-title{
	font-size: 34rpx;
	font-weight: bold;
	line-height: 1.8;
	margin-bottom: 10rpx;
}
.comment{
	padding: 10rpx 0;
}
.comment .user-car{
	display:flex;
}
.user-car .avatar{
	width: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
	overflow:hidden;
}
.user-car .user-info{
	flex: 1;
	overflow: hidden;
	padding: 0 20rpx;
}
.user-info .name{
	display:inline-block;
	font-size: 28rpx;
	font-weight: 600;
}
.user-info .car{
	display:inline-block;
	font-size: 24rpx;
	padding-left: 14rpx;
}
.user-info .rating{
	font-size: 22rpx;
}
.user-info .rating .score{
	padding-left: 8rpx;
	display: inline-block;
}
.user-car .time{
	width: 160rpx;
	font-size: 28rpx;
	color: rgba(0,0,0,.63);
	text-align: right;
}
.comment{
	margin-bottom: 20rpx;
}
.comment .comment-text{
	line-height: 1.8;
}
.comment .comment-images .image{
	display: inline-block;
	margin-right: 20rpx;
	height: 120rpx;
	width: 120rpx;
	overflow: hidden;
	border-radius: 8rpx;
}
.comment .comment-images .image:last-child{
	margin-right: 0;
}
.u-empty{
	padding: 100rpx;
}
</style>
